<template>
  <div class="PublicizeCourse">
    <div class="banner">
      <div class="banner-title">宣传课程</div>
      <div class="banner-search">
        <div class="select">
          <el-select v-model="selectValue">
            <el-option label="课程名称" value="title" />
            <el-option label="专家名称" value="expertName" />
          </el-select>
        </div>
        <div class="split"></div>
        <div class="input">
          <el-input size="large" maxlength="46" @keydown.enter="searchList" v-model="searchValue" placeholder="请输入内容">
            <template #suffix>
              <img @click="searchList" class="search-suffix" src="@/assets/images/front/input_search.png">
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="cource-main main-wrapper">
      <el-tabs v-if="showTab" @tab-change="tabChange" v-model="courseType">
        <el-tab-pane v-for="courseItem in courseTypeList.options" :key="courseItem.id" :label="courseItem.courseTypeName"
          :name="courseItem.id"></el-tab-pane>
      </el-tabs>
      <el-empty v-if="courseList.length == 0" description="暂无数据" />
      <div v-else v-loading="listLoading" class="cource-list">
        <el-row :gutter="34">
          <el-col v-for="(courceItem, courceIndex) in courseList" :key="courceIndex" :span="6">
            <div @click="toDetails(courceItem)" class="cource-item">
              <img v-if="courceItem.isRecommend == 1" class="img-recommend" src="@/assets/images/front/recommend.png">
              <!-- <img class="cource-img" :src="getImageUrl(courceItem.coverUrl)"> -->
              <el-image style="width: 100%;height: 191px;" :src="getImageUrl(courceItem.coverUrl)" fit="cover">
                <template #error>
                  <img src="/images/course_default.png" style="width: 100%; height: 100%;">
                </template>
              </el-image>
              <div class="cource-content">
                <div class="opera">
                  <div class="type">{{ courseTypeList.dict[courceItem.type] }}</div>
                  <el-button class="button" type="primary" @click.stop="reservationCourse(courceItem)" round>预
                    约</el-button>
                </div>
                <div class="cource-title otw-1" :title="courceItem.title">{{ courceItem.title }}</div>
                <div class="cource-position otw-1">{{ courceItem.expertInfo.name }}·{{ courceItem.expertInfo.expertTitle
                }}
                </div>
                <div class="cource-line"></div>
                <div class="show">
                  <div class="show-date">{{ format(courceItem.createTime) }}</div>
                  <div class="show-num">{{ courceItem.joinPeopleCount }}</div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="pagination">
      <el-pagination :total="pager.total" v-model:current-page="pager.pageIndex" :page-size="pager.pageSize"
        @current-change="getCourseList" prev-text="上一页" next-text="下一页" layout="prev, pager, next" background />
    </div>
  </div>
  <CourseAppointment :courseId="appointmentCourseId" :expertId="appointmentExpertId" :courseName="appointmentCourseName"
    v-model:visible="reservationVis" />
</template>
<script>
export default { name: 'PublicizeCourse' }
</script>
<script setup>
import { ref } from 'vue';
import { useSystemStore } from '@/stores/modules/system.js';
import CourseAppointment from '@/components/CourseAppointment.vue';
import { http } from '@/utils/http/index.js'
import { format } from '@/plugins/moment.js'
import usePager from '@/hooks/usePager.js'
import { getImageUrl } from '@/utils/index.js'

const systemStore = useSystemStore()

/**设置头部 */
systemStore.headerType = 'xuanchuan'
systemStore.headerBgcolor = 'normal'
systemStore.headerFontColor = '0'

const courseType = ref('')

/**宣讲列表 */
const courseList = ref([])
const { pager, listLoading, proxyFun } = usePager(12, '/Preach/GetPreachCourseList')
const queryParams = ref({
  dfi: {
    logic: 0,
    filters: [
      { field: 'type', operator: 8, value: '' },
      // 查询已上架
      { field: 'status', operator: 8, value: '1' },
    ]
  }
})

/**根据类型查询课程 */
const getCourseList = () => {
  proxyFun(queryParams.value).then(res => {
    courseList.value = res.result.dataLst.map(el => {
      const temp = { ...el, expertInfo: ref({}) }
      return temp
    })
    GetExpertInfoList()
  })
}

const GetExpertInfoList = (dfiParam) => new Promise(reslove => {
  let dfi = {
    logic: 1,
    filters: courseList.value.map(el => ({
      field: 'id',
      operator: 8,
      value: el.expertId
    }))
  }
  if (dfiParam) {
    dfi = dfiParam
  }
  http.$POST('/Expert/GetExpertInfoList', { dfi }).then(res => {
    if (res.isError) return
    const infoList = res.result.dataLst
    courseList.value.forEach(item => {
      const find = infoList.find(fi => fi.id == item.expertId)
      find && (item.expertInfo = find)
    })
    reslove(res.result.dataLst)
  })
})

const courseTypeList = ref({ options: [], dict: {} })
http.$POST('/PreachM/GetPreachCourseTypeInfoList', { pageIndex: 1, pageSize: 99 }).then(res => {
  if (res.isError) return
  courseTypeList.value = {
    options: res.result.dataLst,
    dict: res.result.dataLst.reduce((pre, next) => ({ ...pre, [`${next.id}`]: next.courseTypeName }), {})
  }

  courseType.value = courseTypeList.value.options[0].id
  queryParams.value = {
    dfi: {
      logic: 0,
      filters: [
        { field: 'type', operator: 8, value: courseType.value },
        // 查询已上架
        { field: 'status', operator: 8, value: '1' },
      ]
    }
  }
  getCourseList()
})

/**切换tab */
const tabChange = () => {
  pager.pageIndex = 1
  queryParams.value = {
    dfi: {
      logic: 0,
      filters: [
        { field: 'type', operator: 8, value: courseType.value },
        // 查询已上架
        { field: 'status', operator: 8, value: '1' },
      ]
    }
  }
  getCourseList()
}

/**搜索栏 */
const selectValue = ref('title')
const searchValue = ref('')
const showTab = ref(true)
const searchList = async () => {
  pager.pageIndex = 1
  const temp = {
    dfi: {
      logic: 0,
      filters: [
        // 查询已上架
        { field: 'status', operator: 8, value: '1' },
      ]
    }
  }

  // 有搜索值
  showTab.value = true
  if (searchValue.value != '') {
    showTab.value = false
    if (selectValue.value == 'expertName') {
      listLoading.value = true
      // 查询专家名称包含的id
      const expertList = await GetExpertInfoList({
        logic: 0,
        filters: [{
          field: 'name',
          operator: 0,
          value: searchValue.value
        }]
      })
      if (expertList.length == 0) return courseList.value = []
      const tempLogic = { logic: 1, filters: [] }
      expertList.forEach(el => {
        tempLogic.filters.push({ field: 'expertId', operator: 7, value: el.id })
      })
      temp.dfi.filters.push(tempLogic)
      listLoading.value = false
    } else {
      temp.dfi.filters.push({ field: selectValue.value, operator: 0, value: searchValue.value })
    }
  }

  queryParams.value = temp
  getCourseList()
}

const toDetails = (item) => {
  window.open(`/explain-and-publicize/course-details?id=${item.id}`)
}

/**预约课程 */
const reservationVis = ref(false)
const appointmentCourseId = ref('')
const appointmentExpertId = ref('')
const appointmentCourseName = ref('')
const reservationCourse = (item) => {
  appointmentCourseId.value = item.id
  appointmentExpertId.value = item.expertId
  appointmentCourseName.value = item.title
  reservationVis.value = true
}
</script>
<style lang='scss' scoped>
@import '@/assets/styles/variables.scss';

.PublicizeCourse {
  width: 100%;

  .banner {
    width: 100%;
    min-width: $wrapperWidth;
    height: 296px;
    background-image: url(@/assets/images/front/xuanchuan_banner.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 39px;

    .banner-title {
      font-size: 45px;
      font-family: Source Han Serif CN-Bold, Source Han Serif CN;
      font-weight: bold;
      color: #FFFFFF;
      letter-spacing: 10px;
      text-shadow: 0px 3px 6px #000000;
      -webkit-text-stroke: 1px #FFFFFF;
      margin-bottom: 33px;
    }

    .banner-search {
      width: 828px;
      height: 52px;
      background-color: #fff;
      border-radius: 2px;
      display: flex;
      align-items: center;

      .select {
        width: 114px;
        text-align: center;
        cursor: pointer;
        font-size: 16px;
        font-weight: 600;
        color: #5A5A5A;

        &:deep(.el-select) {
          width: 110px;

          .el-input__wrapper {
            box-shadow: unset !important;

            &.is-focus {

              box-shadow: unset;
            }

            .el-input__inner {
              text-align: center;
            }
          }

        }

        .dropdown {
          width: 96px;
          height: 52px;
          gap: 6px;
        }
      }

      .split {
        border: 1px solid #DCDCDC;
        width: 0;
        height: 13px;
      }

      .input {
        flex: 1;

        &:deep(.el-input) {
          width: 100%;

          .el-input__wrapper {
            box-shadow: none;
          }
        }

        .search-suffix {
          width: 18px;
          height: 18px;
          cursor: pointer;
        }
      }
    }
  }

  .cource-main {
    min-height: 48vh;

    .cource-list {
      min-height: 412px;
      margin-top: 24px;

      .cource-item {
        width: 100%;
        height: 386px;
        display: flex;
        flex-direction: column;
        margin-bottom: 25px;
        position: relative;
        cursor: pointer;

        .img-recommend {
          top: 10px;
          left: 9px;
          position: absolute;
          width: 50px;
          height: 30px;
          z-index: 2;
        }

        .cource-img {
          width: 100%;
          height: 191px;
          display: block;
          object-fit: cover;
        }

        .cource-content {
          flex: 1;
          background-color: #FAFAFA;
          padding: 18px 18px 14px;

          .opera {
            display: flex;
            justify-content: space-between;
            margin-bottom: 16px;

            .type {
              font-size: 16px;
              font-weight: 400;
              color: var(--theme-color);
            }

            .button {
              width: 77px;
              height: 26px;
            }
          }

          .cource-title {
            font-size: 18px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 16px;
          }

          .cource-position {
            font-size: 16px;
            font-weight: 400;
            color: #5C5C5C;
          }

          .cource-line {
            width: 100%;
            height: 1px;
            background-color: #DDDDDD;
            margin: 24px 0 13px;
          }

          .show {
            display: flex;
            justify-content: space-between;

            .show-date {
              font-size: 16px;
              font-weight: 400;
              color: #5C5C5C;
            }

            .show-num {
              padding-left: 36px;
              background-image: url(@/assets/images/front/people_num.png);
              background-repeat: no-repeat;
              background-size: 32px 22px;
              color: var(--theme-color);
              font-size: 15px;
            }
          }
        }
      }

    }

    :deep(.el-tabs) {
      .el-tabs__item {
        min-width: 138px;
        font-size: 18px;
        padding-bottom: 10px;
      }
    }
  }

  .pagination {
    margin: 60px 0 52px;

    :deep(.el-pagination) {
      justify-content: center;

      // li,
      // button {
      //   color: #999999;
      //   border: 1px solid #EEEEEE;
      //   margin-right: 10px;
      // }

      // li.is-active {
      //   background-color: var(--theme-color);
      //   font-weight: bold;
      //   color: #fff;
      // }
    }
  }
}
</style>